<template>
	<view>
		<u-picker :show='showModelName' :columns="carModelRange" keyName="vehicleNickName" @cancel="showModelName=false"
			@confirm="confirmPicker" confirmColor='#EA5404'>
		</u-picker>
		<u-picker :show='showType' :columns="typeRange" keyName="name" @cancel="showType=false" @confirm="confirmPicker"
			confirmColor='#EA5404'>
		</u-picker>
		
		<u-picker :show="showCityPicker" :columns="pickerColumns" keyName="label"
			confirmColor='#EA5404' @change="changeHandler" @cancel='showCityPicker = false'
			@confirm='confirmPicker'>
		</u-picker>
		
		<u-picker :show="showStorePicker" :columns="storeRange" keyName="storeName"
			confirmColor="#EA5404" @cancel='showStorePicker = false' @confirm='confirmPicker'>
		</u-picker>
		
		<u-datetime-picker :show="showAppointmentDatePicker" mode="date" confirmColor="#EA5404"
			@cancel="showAppointmentDatePicker=false" @confirm="confirmPicker"
			:minDate="new Date().getTime()">
		</u-datetime-picker>




		<view class="example">
			<scroll-view :scroll-y="true" style="height: calc(100% - 100px );">

				<uni-forms ref="valiForm" :modelValue="valiFormData" label-position="top">
					<!-- 预约车型 -->
					<view class="itemView">
						<uni-forms-item label="预约车型" name="vin" :labelHeight='40'>

							<view class="uni-input" @click="showModelName=true">
								{{valiFormData.vin ? vehicleNickName: '请选择预约车型'}}
							</view>
							<image class="arrow" src="@appstatic/message/message_icon_arrow.png"></image>
						</uni-forms-item>
					</view>

					<!-- 预约类型 -->
					<view class="itemView">
						<uni-forms-item label="预约类型" name="type">

							<view class="uni-input" @click="showType=true" v-if="valiFormData.type">
								{{valiFormData.type=='1' ? '维修': '保养'}}
							</view>
							<view class="uni-input" @click="showType=true" v-else>
								请选择预约类型
							</view>
							<image class="arrow" src="@appstatic/message/message_icon_arrow.png"></image>
						</uni-forms-item>
					</view>
					<!-- 维修类型 -->
					<!-- <uni-forms-item label="维修类型" name="repairType" v-if="valiFormData.type=='1'">
						<u-picker :show='showRepairType' :columns="repairTypeRange" keyName="name"
							@cancel="showRepairType=false" @confirm="confirmPicker" confirmColor='#EA5404'>
						</u-picker>
						<view class="uni-input" @click="showRepairType=true">
							{{valiFormData.repairType ? valiFormData.repairTypeName: '请选择维修类型'}}
						</view>
						<image class="arrow" src="@appstatic/message/message_icon_arrow.png"></image>
					</uni-forms-item> -->

					<!-- 城市 -->
					<view class="itemView">
						<uni-forms-item label="城市" name="userCityName">
							
							<view class="uni-input" @click="showCityPicker = true">
								{{valiFormData.userCityName ? valiFormData.userCityName : '请选择所在城市'}}
							</view>
							<image class="arrow" src="@appstatic/message/message_icon_arrow.png"></image>
						</uni-forms-item>
					</view>
					<!-- 预约门店 -->
					<view class="itemView" v-if="storeRange.length">
						<uni-forms-item label="预约门店" name="storeCode">
							<!-- v-if="storeRange.length" -->
							
							<view class="uni-input" @click="showStorePicker=true">
								{{valiFormData.stroeId ? storeName: '请选择预约门店'}}
							</view>
							<image class="arrow" src="@appstatic/message/message_icon_arrow.png"></image>
						</uni-forms-item>
					</view>
					<view class="itemView">
						<uni-forms-item label="预约日期" name="appointmentDate">
							
							<view class="uni-input" @click="showAppointmentDatePicker=true">
								{{valiFormData.appointmentDate ? valiFormData.appointmentDate: '请选择预约日期'}}
							</view>
							<image class="arrow" src="@appstatic/message/message_icon_arrow.png"></image>
						</uni-forms-item>
					</view>
					<view class="itemView">
						<uni-forms-item label="里程km" name="mileage">
							<input class="uni-input" type="number" maxlength="10" v-model="valiFormData.mileage"
								placeholder="请输入里程km" @input="numberFixedDigit" />
						</uni-forms-item>
					</view>
					<view class="itemView_textarea" v-if="valiFormData.type!='2'">
						<!-- <uni-forms-item label="预约备注" name="remark1">
							<textarea maxlength="100" v-model='valiFormData.remark1' placeholder="请输入预约备注"
								auto-height />
						</uni-forms-item> -->
						<uni-forms-item label="详细描述" name="remark1">
							<textarea maxlength="100" v-model='valiFormData.remark1' placeholder="请输入详细描述"
								auto-height />
						</uni-forms-item>
					</view>

					<view class="itemView_textarea" v-else>

						<uni-forms-item label="详细描述" name="remark2">
							<textarea class="uni-input" maxlength="100" v-model='valiFormData.remark2'
								placeholder="请输入详细描述" auto-height />
						</uni-forms-item>
					</view>

					<view style="border-bottom: 1px solid #F0F0F0;"></view>


				</uni-forms>



			</scroll-view>
			<button type="primary" @click="submit('valiForm')" class="submitBtn">立即预约</button>
		</view>


	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js")
	import Validator from '@/manager/validator.js'
	export default {
		data() {
			return {
				vehicleNickName: '',
				label: '',
				storeName: '',

				deviceId: '',
				city: null,
				cityCode: null,
				second: 0,
				valiForm: {},

				rules: {
					vin: {
						rules: [{
							required: true,
							errorMessage: '车型不能为空'
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '预约车型不能为空'
						}]
					},
					userCityName: {
						rules: [{
							required: true,
							errorMessage: '城市不能为空'
						}]
					},
					storeCode: {
						rules: [{
							required: true,
							errorMessage: '预约门店不能为空'
						}]
					},
					appointmentDate: {
						rules: [{
							required: true,
							errorMessage: '预约时间不能为空'
						}]
					},

					mileage: {
						rules: [{
							required: true,
							errorMessage: '里程数不能为空'
						}]
					},




				},
				valiFormData: {
					userId: app.globalData.userInfo ? app.globalData.userInfo.id : null,
					vin: null,
					type: null,
					userCityCode: null,
					userCityName: null,
					stroeId: null,
					appointmentDate: null,
					mileage: null,
					remark1: null,
					remark2: null,
					remark: null,

				},
				carModelRange: [],
				typeRange: [
					[{
						name: '维修',
						value: '1'
					}, {
						name: '保养',
						value: '2'
					}]
				],
				storeRange: [],

				falg: false,
				/* 地址 */

				pickerColumns: [
					[],
					[]
				],
				showAppointmentDatePicker: false,

				showModelName: false,
				showType: false,
				// showRepairType: false,
				showCityPicker: false,
				showStorePicker: false,
				currentUrl: ''
			}
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage(res) { //发送给朋友
			return {}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {}
		},
		onLoad(options) {
			this.deviceId = options.deviceId
			this.getProvinces()
		},
		created(options) {
			this.getMyCarList()
			// this.getStoreList()
		},
		onReady() {
			this.$refs.valiForm.setRules(this.rules)
		},
		onShow() {},
		methods: {
			numberFixedDigit(e) {
				e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
				this.$nextTick(() => {
					this.valiFormData.mileage = e.target.value
				})
			},

			//查询我的爱车
			getMyCarList() {
				let url = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_GETMYCARLIST
				let params = {
					userId: app.getUserId()
				}
				network.get(url, params, 'form').then(res => {
					var list = res.data
					for (var i = 0; i < list.length; i++) {
						list[i].vehicleNickName = list[i].vehicleName == undefined || list[i].vehicleName ==
							null || list[i].vehicleName == '' ? list[i].modelName : list[i]
							.vehicleName
					}
					this.carModelRange = [list]
					console.log(this.carModelRange)
				})
			},
			//查询门店
			getStoreList(city) {
				if (!city) return
				let url = app.globalData.config.interfaces.URL_GETSTAGESSTORELIST
				let params = {
					"isCity": city,
					"dictionaryCode": 'LEVC_STORE_AREA',
					"contentCode": '007'
				}
				network.get(url, params, 'form').then(res => {
					if (res.data.length > 0) {
						this.storeRange = [res.data]
					}

				})
			},

			//确定
			confirmPicker(e) {
				const timeFormat = uni.$u.timeFormat
				// 预约车型
				if (this.showModelName == true) {
					this.showModelName = false
					this.vehicleNickName = e.value[0].vehicleNickName
					this.valiFormData.vin = e.value[0].vin
					this.currentUrl = e.value[0].imageTestCover
				}
				//预约类型
				if (this.showType == true) {
					this.showType = false
					this.valiFormData.remark = null
					this.valiFormData.type = e.value[0].value
				}

				//城市
				if (this.showCityPicker == true) {
					this.showCityPicker = false
					this.valiFormData.userCityCode = e.value[1].code
					this.valiFormData.userCityName = e.value[1].label
					this.storeRange = []
					this.getStoreList(this.valiFormData.userCityCode)
					this.valiFormData.stroeId = null
				}
				//预约门店
				if (this.showStorePicker == true) {
					this.showStorePicker = false
					this.valiFormData.stroeId = e.value[0].uuid
					this.storeName = e.value[0].storeName
				}
				//预约日期
				if (this.showAppointmentDatePicker == true) {
					this.showAppointmentDatePicker = false
					this.valiFormData.appointmentDate = timeFormat(e.value, 'yyyy-mm-dd')
				}
			},

			/* 省市 */
			//获取省
			async getProvinces() {
				var url = app.globalData.config.interfaces.URL_GET_PROVINCE
				var params = {
					// "loginId": app.getUserId()
				}
				await network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						let arr = []
						res.data.ProvinceList.map(item => {
							item.label = item.provinceName, item.code = item.provinceCode, arr.push(
								item)
						})
						this.pickerColumns.splice(0, 1, arr)
						this.getCitys(this.pickerColumns[0][0]['provinceCode'])
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: 'none'
						})
					}
				}).catch(res => {

				});
			},

			//获取市
			async getCitys(code) {
				var url = app.globalData.config.interfaces.URL_GET_CITY_BY_PROVINCE
				var params = {
					// "loginId": app.getUserId(),
					"provinceCode": code
				}
				await network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						let arr = []
						res.data.cityList.map(item => {
							item.label = item.cityName, item.code = item.cityCode, arr.push(item)
						})
						this.pickerColumns.splice(1, 1, arr)
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: 'none'
						})
					}
				}).catch(res => {

				});
			},

			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.getCitys(this.pickerColumns[0][index]['provinceCode'])
				}
				// picker.setIndexs([1, 0])
			},


			async submit() {
				await this.$refs.valiForm.validate()
				if (this.valiFormData.type == '1') {
					this.valiFormData.remark = this.valiFormData.remark1
				} else {
					this.valiFormData.remark = this.valiFormData.remark2
				}

				if (this.storeRange.length && !this.valiFormData.stroeId) {
					uni.showToast({
						title: '请选择预约门店',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				let data = JSON.parse(JSON.stringify(this.valiFormData))
				delete data.remark1
				delete data.remark2
				let url = app.globalData.config.interfaces.URL_PRODUCT_AFTERSALES_CREATE
				network.post(url, data, 'json', null, true).then(res => {
					if (res.code == 200) {
						debugger
						this.toCompletePage()



					} else {
						setTimeout(() => {
							wx.showToast({
								title: res.message,
								mask: true,
								icon: 'none',
								duration: 2000
							});
						}, 500);
					}
				})
			},
			toCompletePage() {
				uni.redirectTo({
					url: `/module_car/pages/testDrive/complete?url=${this.currentUrl}&type=${this.valiFormData.type}&from=维修保养`,
				});
			},


		}
	}
</script>

<style lang="less">
	page {
		background-image: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my_logo_bg.png);
		width: 100%;
		height: 100%;
		background-repeat: space;
		background-size: 100%;
	}


	.example {
		position: absolute;
		width: 686rpx;
		box-sizing: border-box;
		margin-left: 32rpx;
		margin-right: 32rpx;
		height: 100%;
	}

	/deep/ .uni-stat__select {
		padding: 0;
	}

	// /deep/ .uni-forms-item__inner {
	// 	padding-bottom: 0;
	// 	border-bottom: 1px solid #F0F0F0;
	// }


	/deep/ .uni-forms-item__label .label-text {
		font-size: 14px;
		line-height: 20px;
		color: #ADB0AE;
	}

	/deep/ .is-input-border {
		border: none;
		height: 44px;
	}





	/deep/ .uni-input-input {
		font-size: 16px;
		color: #333333;
	}



	/deep/ .uni-forms-item__content {
		font-size: 16px;
		color: #333333;
		line-height: 44px;
		position: relative;
	}

	/deep/ .uni-easyinput__content-input {
		padding: 0 !important;
	}

	/deep/ .uni-input-placeholder {
		font-weight: 400;
		font-size: 16px;
		color: #333333;
	}


	/deep/ .uni-textarea-textarea {
		font-size: 16px;
		color: #333333;
	}

	/deep/.uni-textarea-wrapper {
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		margin-top: 11px;
		position: relative;
		width: calc(100vw - 32px);
	}

	/deep/.uni-input {
		width: calc(100vw - 32px);
	}

	/deep/ .uni-textarea-placeholder {
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		width: calc(100vw - 32px);
		padding-bottom: 0;
		// border-bottom: 1px solid #F0F0F0;
	}







	button {
		background-color: #EA5404 !important;
		font-weight: 400;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 40px;
	}

	/deep/ .button-hover {
		background-color: #EA5404 !important;
		border-color: #EA5404 !important;
	}

	/deep/ .uni-picker-container .uni-picker-action.uni-picker-action-confirm {
		color: #EA5404 !important;
	}



	.uni-input {
		height: 44px;
	}

	.arrow {
		position: absolute;
		width: 12px;
		height: 16px;
		right: 2px;
		bottom: 11px;
		transform: rotate(90deg);
	}

	.submitBtn {
		bottom: 100rpx;
		position: absolute;
		width: 686rpx;
	}

	.itemView {
		border-bottom: 1px solid #F0F0F0;
		height: 80px;
		padding-bottom: 5px;
		padding-top: 5px;
		min-width: 80px;
	}

	.itemView_textarea {
		// margin-bottom: 5px;
		// padding-bottom: 5px;
		padding-top: 5px;
		min-width: 70px;
	}
</style>
